<script>
import axios from "axios";
import {ref} from "vue";

export default {

  //组件部件
  setup(){
    const dialogVisible1 = ref(false);
    const dialogVisible2 = ref(false);
    return {
      dialogVisible1,
      dialogVisible2,
    }
  },
  data(){
    var checkName =(rule,value,callback)=>{
      if (!value){
        return callback(new Error("请输入名称"))
      }else {
        return callback();
      }
    };
    return {
      updateRolesList: {},
      roleName1:'',
      pageDto:{
        pageSize:3,
        pageNum:1
      },
      queryRolesList:[],
      total:0,
      pages:0,
    }
  },
  methods:{
    getData:function(){//分页查询
      axios.get("/oa/system/queryRolesList",{params:this.pageDto}).then((res)=>{
        console.log(res.data.data)
        this.pageDto.pageNum=res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total=res.data.data.total;
        this.pages=res.data.data.pages;
        this.queryRolesList=res.data.data.list;
      })
    },
    insertRoles:function(){//新增
      if(this.roleName1 === null ||this.roleName1 === "" || this.roleName1 === undefined){
        this.$message({
          type: 'warning',
          message: '请输入角色!'
        });
        return;
      }
      axios.post('/oa/system/insertRoles', {roleName1:this.roleName1},{headers:
            {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res=>{
        this.$message({
          type: 'success',
          message: '新增成功!'
        });
        this.roleName1=''
        this.getData()
        this.dialogVisible1 = false;
      })
    },
    getByUpdateRoles(index, roleId){//修改_获取数据
      this.dialogVisible2 = true;
      axios.get(`/oa/system/getByUpdateRoles/${roleId}`)
          .then((res) => {
            console.log(res)
            this.updateRolesList = res.data.data
          })
          .catch((error) => {
            console.log(error)
          })
    },
    updateRoles () {//修改
      axios.put("/oa/system/updateRoles",this.updateRolesList)
          .then( (data)=>{
            if(data.data){
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogVisible2 = false
              this.getData()
            }else {
              this.$message({
                type: 'error',
                message: '修改失败!'
              });
              this.dialogVisible2 = false
            }
          })
          .catch((error)=>{
            console.log(error)
          });
    },
    deleteRoles(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/oa/system/deleteRoles/${row.roleId}`)
            .then((data) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData()
            })
            .catch((error) => {
              console.log(error)
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    },addbutton() {
      this.dialogVisible1 = true
      this.roleName1 = ""
    }
  },
  created() {
    this.getData();
  },
}
</script>

<template>
  <div class="titleBox" >角色管理  </div>
  <el-button size="small" @click="addbutton()">新增</el-button>


  <div>
    <!-- 首页表格信息显示 -->
    <el-table :data="queryRolesList" style="width: 100%">

      <el-table-column label="ID">
        <template #default="scope">
          <div style="display: flex; align-items: center">

            <span style="margin-left: 10px">{{ scope.row.roleId}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="名称">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="Restore(scope.$index, scope.row)">
            权限管理
          </el-button>

          <el-button size="small" type="danger" @click="getByUpdateRoles(scope.$index, scope.row.roleId)">
            修改
          </el-button>
          <el-button size="small" @click="deleteRoles(scope.$index, scope.row)">
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>


    <!-- 分页-->
    <el-pagination
        v-model:current-page="this.pageDto.pageNum"
        :page-size="this.pageDto.pageSize"
        :pager-count="this.pages"
        layout="prev, pager, next"
        :total="this.total"
        @current-change="getData"
    />
  </div>

  <el-dialog
      v-model="dialogVisible2"
      title="修改角色"
      width="500"
      :before-close="handleClose"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="userCord">
        <el-input
            v-model="this.updateRolesList.roleName"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateRoles()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="dialogVisible1"
      title="添加角色"
      width="500"
      :before-close="handleClose"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="this.roleName1"
            type="text"
            autocomplete="off"
            aria-required="true"
            placeholder="请输入内容"
        />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="insertRoles()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">

</style>
